<style>
    #container {
        position: absolute;
        top: 120px;
        bottom: 20px;
        left: 250px;
        right: 20px;
        overflow: hidden;
        width: auto;
        height: auto;
        margin: 0;
        font-family: "微软雅黑";
    }

    #container label {
        max-width: none;
        padding: 0;
        box-sizing: unset;
    }
</style>
<div id="container"></div>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=YgPhXsZhh5pVkvqf6yQydl4CNzSGrLOy"></script>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(115.994193, 29.732255);
    map.centerAndZoom(point, 5);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);

    var devices =@json($models);
    for (var i = 0, l = devices.length; i < l; i++) {

        // console.log(devices[i]);
        if (devices[i].last_address && devices[i].longitude && devices[i].latitude) {
            var p = new BMapGL.Point(devices[i].longitude, devices[i].latitude);
            var marker = new BMapGL.Marker(p);  // 创建标注
            map.addOverlay(marker);
            var opts = {
                position: p, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-30, -60) // 设置文本偏移量
            };
            var label = new BMapGL.Label("设备:"+devices[i].name+" <br> 电量:"+devices[i].soc, opts);
            label.setTitle(JSON.stringify(devices[i]));
            label.setStyle({
                color: 'blue',
                borderRadius: '1px',
                borderColor: '#ccc',
                padding: '2px',
                fontSize: '12px',
                // height: '12px',
                // lineHeight: '12px',
                fontFamily: '微软雅黑'
            });
            addClickHandler(devices[i], label);
            map.addOverlay(label);

        }
    }
    function addClickHandler(content, label) {
        label.addEventListener("click", function (e) {
                alert(JSON.stringify(content));
            }
        );
    }

</script>
